<template>
  <div>
    <div class="box">
      <h3>栏目选择</h3>
      <el-button class="btn el-icon-back" @click="fan">返回</el-button>
      <div class="con">
        <div class="q1">
          <el-tabs :tab-position="tabPosition" style="height: 200px">
            <el-tab-pane
              class="tab"
              :label="item[0].name"
              v-for="item in list"
              :key="item.id"
            >
              <el-tabs :tab-position="tabPosition" style="height: 200px">
                <el-tab-pane
                  class="tab"
                  :label="item[1].name"
                  v-for="item in list"
                  :key="item.id"
                >
                  <div class="w1">
                    {{ item[2].name }}
                  </div>
                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <el-button class="btn1" type="primary">下一步，填写商品信息</el-button>
    </div>
  </div>
</template>
<script>
import { addlist } from "../../api/api";
export default {
  components: {},
  data() {
    return {
      list: [],
      tabPosition: "left",
    };
  },
  mounted() {
    addlist().then((res) => {
      this.list = res.data.data;
      console.log(this.list);
    });
  },
  methods: {
    // 返回
    fan() {
      this.$router.push({ name: "SellerGoods" });
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped>
.box {
  width: 1450px;
  height: 700px;
  background: #fff;
  padding-top: 0.1px;
}
h3 {
  float: left;
  margin: 20px;
}
.btn {
  float: right;
  margin-right: 100px;
  margin-top: 20px;
}
.con {
  width: 1200px;
  height: 520px;
  background: rgb(250, 250, 250);
  margin: 0 auto;
  margin-top: 100px;
  border: 1px solid rgba(0, 0, 0, 0.34);
  border-radius: 5px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.btn1 {
  float: left;
  margin-left: 700px;
  margin-top: 20px;
}
.q1 {
  width: 1000px;
  height: 460px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.34);
}
.tab {
  text-align: center;
}
.w1 {
  float: left;
  margin-left: 100px;
}
</style>